<template>
  <div style="padding: 10px;">
<!--    功能区域-->
    <div style="padding: 10px;">
      <el-button  type="primary" @click="add">新增</el-button>
      <el-button  type="primary">导出</el-button>
    </div>
<!--    搜索区域-->
    <div style="margin: 10px 0">
      <el-input style="width: 200px" v-model="search" placeholder="请输入内容" clearable></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
    </div>
<!--    tableData注入表格数据,stripe:斑马纹,border:边框,tableData:存储表中数据，从后端数据库中获得-->
    <el-table
        :data="tableData"
        stripe
        border
        :cell-style="{borderColor:'darkgray'}"
        :header-cell-style="{borderColor:'darkgray',background:'rgb(180, 229, 239)'}"
        style="border:1px solid darkgray ;max-width: 1200px">
  <!--    定义表头,sortable:日期排序-->
<!--      该prop需要和数据库中定义变量一一对应-->
        <el-table-column prop="id" label="ID" sortable />
        <el-table-column prop="username" label="用户名"  />
        <el-table-column prop="nickName" label="昵称"  />
        <el-table-column prop="age" label="年龄"  />
        <el-table-column prop="sex" label="性别"  />
        <el-table-column prop="address" label="地址" />
        <el-table-column fixed="right" label="Operations" width="120">
        <template #default="scope">
          <el-button  type="primary" size="small" style="width: 40px" @click="handleEdit(scope.row)">编辑</el-button>
<!--          确定删除的弹出框-->
          <el-popconfirm title="确定删除吗" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger" style="width: 40px" size="small"  >删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

<!--    分页处理,数据可以绑定到data中,默认数据不用绑定直接定义-->
    <div style="margin:10px 0">
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[5,10,20]"

          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
<!--新增的弹出显示-->
      <el-dialog
          v-model="dialogVisible"
          title="新增"
          width="30%"

      >
<!--        弹出框中设置表单-->
        <el-form
            label-width="120px"
            :model="form"
        >
          <el-form-item label="用户名">
            <el-input v-model="form.username" style="width: 80%" />
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="form.nickName" style="width: 80%" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age" style="width: 80%" />
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="form.sex" label="男">男</el-radio>
            <el-radio v-model="form.sex" label="女">女</el-radio>


          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address" style="width: 80%" />
          </el-form-item>


        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save" >
          确定
        </el-button>
      </span>
        </template>
      </el-dialog>
    </div>
  </div>

</template>




<script >
//引入request
import request from "@/utils/request";

export default {
  name: 'HomeView',
  components: {

  },
  created() {
    this.load()
  },
  methods:{
    load(){
      request.get("/api/user",{
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res =>{
        console.log(res);
        this.tableData=res.data.records//将后台数据赋值到前台数据进行渲染
        this.total = res.data.total
      })
    },
    //用来打开弹窗
    add(){
        this.dialogVisible=true
        this.form={}//将表单清空
    },
    save(){
      if(this.form.id){//如果id能够找到，那么save表现为更新
        request.put("/api/user",this.form).then(res => {
          console.log(res)
          //如果进行更新成功，则弹出提示框
          if(res.code ==='0'){
            this.$message({
              type:"success",
              message:"更新成功"
            })
          } else {
            this.$message({
              type:"error",
              message:res.msg
            })
          }
          this.load()//刷新表格数据
          this.dialogVisible=false//关闭弹窗
        })
      }else {//否则表现为新增
        //设置代理api
        request.post("/api/user",this.form).then(res => {
          console.log(res)
          if(res.code ==='0'){
            this.$message({
              type:"success",
              message:"新增成功"
            })
          } else {
            this.$message({
              type:"error",
              message:res.msg
            })
          }
          this.load()//刷新表格数据
          this.dialogVisible=false//关闭弹窗
        })
      }

    },
    handleDelete(id){
      request.delete("/api/user/"+id).then(res => {
        if(res.code ==='0'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        } else {
          this.$message({
            type:"error",
            message:res.msg
          })
        }
        this.load();//重新加载表格数据
      })
    },
    handleEdit(row){
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    handleSizeChange(pageSize){//改变每页个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum){//改变当前页码触发
      this.currentPage=pageNum
      this.load()
    }
  },
  data(){
    return{

      form:{},
      dialogVisible:false,
      total:0,
      currentPage:1,
      search:"",
      tableData :[]
    }
  }


}
</script>
